<template>
  <div id="rightPage">
    <div class="head-select">
      <el-select v-model="plotId" @change="plotChange" placeholder="请选择小区">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="fullTitle" @click="fullScreen">全屏查看</div>
    </div>
    <div id="fullDom" style="position: relative">
      <!-- 这里放楼栋(带背景图) -->
      <div
        style="
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          cursor: pointer;
        "
      >
        <div v-show="flag" class="info_box pointerEvents">
          <div class="info_word">楼栋：{{ buildinfo.buildName }}</div>
          <div class="info_word">供热面积：{{ buildinfo.heatArea }}㎡</div>
          <div class="info_word">单元数：{{ buildinfo.unitCount }}</div>
          <div class="info_word">热用户比：{{ buildinfo.heatScale }}</div>
        </div>
        <!-- <img src="../../assets/images/beijing.png" style="width: 100%; height: 100%" alt="" /> -->
        <BuildingWave
          @buildClick="goUnit"
          :data="balancedBuildVoList"
          @buildMousemove="buildMousemove"
          @buildMouseout="buildMouseout"
        >
        </BuildingWave>
      </div>

      <!-- title(标题) -->
      <div class="title">
        <div class="date">
          {{ dateInfo.year }}.{{ dateInfo.month | buL }}.{{
            dateInfo.date | buL
          }}
          {{ dateArr[dateInfo.day] }} {{ dateInfo.hours | buL }}:{{
            dateInfo.minutes | buL
          }}:{{ dateInfo.seconds | buL }}
        </div>
        <div class="info">天气预警信息：{{ weatherWarnText }}</div>
        <!-- <img class="tag" src="../../assets/images/img (1).png" alt="" /> -->
        <span class="tagText">{{ plotName }}供热二网调控管理系统</span>
        <img class="img" src="../../assets/images/img (2).png" alt="" />
      </div>

      <!-- 内容 -->
      <div class="content pointerEvents" style="position: relative">
        <div class="left">
          <div class="titleInfo">设备在线台数</div>
          <div ref="biao1" class="biao1"></div>
          <div class="titleInfo">节能数据对比</div>
          <div ref="biao2" class="biao2"></div>
          <div class="titleInfo">数据总览</div>
          <div
            ref="biao3"
            class="biao3"
            style="padding: 15px 5px 0; box-sizing: border-box"
          >
            <div
              style="
                height: 20%;
                width: 100%;
                display: flex;
                justify-content: space-around;
              "
            >
              <select
                v-model="dataScreenSelect.day"
                @change="bottomDayChange"
                name="pets"
                id="pet-select"
                style="width: 28%; height: 20px"
              >
                <option v-for="(a, b) in options1" :key="b" :value="a.value">
                  {{ a.label }}
                </option>
              </select>
              <!-- <select
                v-model="dataScreenSelect.plotId"
                @change="bottomPlotChange"
                name="pets"
                id="pet-select"
                style="width: 28%; height: 20px"
                disabled
              >
                <option v-for="(v, i) in options2" :key="i" :value="v.value">
                  {{ v.label }}
                </option>
              </select> -->
              <select
                v-model="dataScreenSelect.buildId"
                @change="bottomBuildChange"
                name="pets"
                id="pet-select"
                style="width: 28%; height: 20px"
              >
                <option
                  v-for="(item, index) in options3"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </option>
              </select>
            </div>
            <div class="biao3_info" style="height: 76%; width: 100%"></div>
          </div>
        </div>
        <div class="center pointerEvents">
          <div class="top">
            <div class="box">
              <div>
                <div class="bottom_top">{{ footData.dailyConsumption }}Kwh</div>
                <div class="bottom_bottom">
                  日消耗 {{ dateInfo.year }}-{{ dateInfo.month | buL }}
                </div>
              </div>
            </div>
            <div class="box">
              <div>
                <div class="bottom_top">{{ footData.unitHeatArea }}w/㎡</div>
                <div class="bottom_bottom">单位面积热指标</div>
              </div>
            </div>
            <div class="box">
              <div>
                <div class="bottom_top">{{ footData.unitFlowArea }}m³/h</div>
                <div class="bottom_bottom">单位面积流量</div>
              </div>
            </div>
            <div class="box">
              <div>
                <div class="bottom_top">{{ footData.roomTemperature }}℃</div>
                <div class="bottom_bottom">平均室温</div>
                <!-- <div class="bottom_bottom">2023-5-15 10:00</div> -->
              </div>
            </div>
            <div class="box">
              <div>
                <div class="bottom_top">
                  {{ footData.waterSupplyTemperature }}℃
                </div>
                <div class="bottom_bottom">二次网供水温度</div>
              </div>
            </div>
            <div class="box">
              <div>
                <div class="bottom_top">
                  {{ footData.returnWaterTemperature }}℃
                </div>
                <div class="bottom_bottom">二次网回水温度</div>
              </div>
            </div>
          </div>

          <div class="bottom">
            <div class="box">
              <div>
                <div class="bottom_top">总户数</div>
                <div class="bottom_bottom">{{ topData.totalHousehold }}户</div>
              </div>
            </div>
            <div class="box">
              <div>
                <div class="bottom_top">总供热面积</div>
                <div class="bottom_bottom">{{ topData.totalHeatArea }}㎡</div>
              </div>
            </div>
            <div class="box">
              <div>
                <div class="bottom_top">实时预警</div>
                <div class="bottom_bottom">{{ topData.warningCount }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="titleInfo">天气预报</div>
          <div class="biao4 w-warp">
            <div class="w-top">
              <div style="display: flex; align-items: center">
                <img
                  style="width: 16px; height: 16px; margin-right: 5px"
                  src="../../assets/images/tianqi (1).png"
                  alt=""
                />
                <span>{{ todayWeather.tempDay }}°C</span>
              </div>
              <span>{{ todayWeather.conditionDay }}</span>
              <span>{{ todayWeather.week }}</span>
              <span>最高温度{{ todayWeather.tempDay }}°C</span>
              <span>最低温度{{ todayWeather.tempNight }}°C</span>
            </div>
            <div
              :class="weatherShow == 2 ? 'weather2BoxShow' : ''"
              class="weatherScroll"
            >
              <div class="boxItem">
                <div class="biao4_info" ref="biao4" style="height: 65%"></div>
                <div class="gundong">
                  <vue-seamless-scroll
                    :data="dayWeather"
                    class="warp"
                    style="height: 20%"
                    :class-option="classOption"
                    :hoverStop="true"
                  >
                    <div
                      class="scrollInfo"
                      v-for="(item, index) in dayWeather"
                      :key="index"
                    >
                      <span>{{ item.predictDate }}</span>
                      <span>{{ item.week }}</span>
                      <!-- <div class="w-center">
                        <img src="../../assets/images/tianqi (1).png"
                          style="width: 16px; height: 16px; margin-right: 5px" />
                        <img v-if="item.type === 1" src="../../assets/images/tianqi (1).png"
                          style="width: 16px; height: 16px; margin-right: 5px" />
                        <img v-if="item.type === 2" src="../../assets/images/tianqi (2).png"
                          style="width: 16px; height: 16px; margin-right: 5px" />
                        <img v-if="item.type === 3" src="../../assets/images/tianqi (3).png"
                          style="width: 16px; height: 16px; margin-right: 5px" />
                        <img v-if="item.type === 0" src="../../assets/images/tianqi (4).png"
                          style="width: 16px; height: 16px; margin-right: 5px" />
                          <span class="tianqiicon"></span>
                          <span>{{ item.conditionDay }}</span>
                      </div> -->
                      <span class="tianqiicon">{{ item.conditionDay }}</span>
                      <span>{{ item.tempNight + "-" + item.tempDay }}℃</span>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div class="weatherBox">
                <div class="weatherList">
                  <div
                    :key="item.hour"
                    v-for="item in hoursWeater"
                    class="weatherItem"
                  >
                    <span class="time">{{ item.hour }}</span>
                    <img
                      class="weatherImage"
                      src="../../assets/images/tianqi (1).png"
                      alt="天气图片"
                    />
                    <span class="weatherText">{{ item.condition }}</span>
                  </div>
                </div>
                <div class="weatherBiao2Box">
                  <div class="weatherBiao2"></div>
                </div>
              </div>
            </div>
            <div class="t-change">
              <span
                @click="weatherShowChange(1)"
                :class="weatherShow == 1 ? 'active-t-item' : ''"
                class="change-item"
              ></span>
              <span
                @click="weatherShowChange(2)"
                :class="weatherShow == 2 ? 'active-t-item' : ''"
                class="change-item"
              ></span>
            </div>
          </div>
          <div class="titleInfo">预警信息</div>
          <div class="biao5" ref="biao5"></div>
          <div class="titleInfo">预警分类</div>
          <div class="biao6" ref="biao6"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import moment from "moment";
// import data5 from "@/utils/data5.json";
import {
  deviceStatistics,
  dataOverview,
  energyData,
  warningInformation,
  lineChart,
  indexStatistics,
  warnType,
  getWeather,
  getRealTime,
  weatherWarning,
} from "@/api/bigscreen/bigscreen";
import { listCPlotSelect, listBuildSelect } from "@/api/system/utils";
import { getBuildList } from "@/api/balancedView/balancedView";
import BuildingWave from "@/components/BuildingWave";
moment.locale("zh-cn");
const myChartObj = {
  biao1: null,
  biao2: null,
  biao3_info: null,
  biao4_info: null,
  biao5: null,
  biao6: null,
  weatherBiao2: null,
};
export default {
  name: "Bigscreen",
  components: { BuildingWave },
  data() {
    return {
      // 小区id
      plotId: null,
      //小区名
      plotName:"",
      flag: false,
      fullBoolean: false,
      //所在城市code，天气用
      cityCode: "",
      topData: {
        //总户数
        totalHeatArea: 0,
        //供热面积
        totalHousehold: 0,
        // 实时预警
        warningCount: 0,
      },
      footData: {
        dailyConsumption: 0,
        unitHeatArea: 0,
        unitFlowArea: 0,
        roomTemperature: 0,
        waterSupplyTemperature: 0,
        returnWaterTemperature: 0,
      },
      option1: {
        legend: {
          x: "right",
          y: "center",
          icon: "circle",
          orient: "vertical",
          align: "left",
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 10,
          },
        },
        tooltip: {
          confine: true,
          trigger: "item",
          formatter: function (p) {
            if (p.data.online) {
              return `${p.data.name} : ${p.data.equipmentCount}<br>在线率：(${p.data.online}%)`;
            } else {
              return `${p.data.name} : ${p.data.equipmentCount}`;
            }
          },
        },
        color: ["#27B5FB", "#8E70F2", "#F9D64F", "#EAAE5C", "#E67772","#FEDFE1","#E83015"],
        title: [
          {
            top: "5%",
            text: "总台数",
            left: "25%",
            textAlign: "center",
            textStyle: {
              color: "#fff",
            },
          },
          {
            top: "5%",
            text: "在线率",
            left: "60%",
            textAlign: "center",
            textStyle: {
              color: "#fff",
            },
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            center: ["25%", "55%"],
            label: {
              formatter: (params) => {
                return ` ${params.data.equipmentCount}`;
              },
              fontSize: 10,
              color: "#fff",
              position: "inner",
              // formatter:(params)=>{
              //   return `${params.data.name} \n\n 在线率：${params.data.online}%`
              // },
              // normal: {
              //   show: false,
              // },
            },
            labelLine: {
              // normal: {
              //   show: false,
              // },
            },
            data: [],
            // roseType: "area",
          },
          {
            type: "pie",
            radius: ["40%", "70%"],
            center: ["60%", "55%"],
            label: {
              formatter: (params) => {
                return `${params.data.online}%`;
              },
              color: "#fff",
              fontSize: 10,
              position: "inner",
              // normal: {
              //   show: false,
              // },
              // position: 'outer',
              // alignTo: 'edge',
              // margin:200,
            },
            labelLine: {},
            data: [],
          },
        ],
      },
      option2: {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        grid: {
          width: "auto",
          height: "65%",
          containLabel: true,
        },
        // dataset: {
        //   source: [
        //     ["type", "1号楼", "2号楼", "3号楼", "4号楼", "5号楼"],
        //     ["能耗", 1020, 562, 981, 634, 790],
        //     ["阀门开度", 810, 582, 991, 1024, 990],
        //     ["供热量", 750, 962, 911, 854, 590],
        //     ["供热量", 70, 92, 911, 824, 790],
        //   ]
        // },
        legend: {
          top: "20px",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: ["1号楼", "2号楼", "3号楼", "4号楼", "5号楼"],
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              //图例文字的样式
              color: "#fff",
            },
          },
        },
        yAxis: {
          min: 0,
          // max: 100,
          axisLabel: {
            textStyle: {
              //图例文字的样式
              color: "#fff",
            },
          },
        },
        series: [
          {
            type: "bar",
            seriesLayoutBy: "row",
            barWidth: 5,
            data: [612, 333, 453, 234, 523, 232],
            name: "能耗",
            barMinHeight: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#1A2F64FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4C74FF", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                borderRadius: [2, 2, 0, 0],
              },
            },
          },
          {
            type: "bar",
            seriesLayoutBy: "row",
            barWidth: 5,
            barMinHeight: 10,
            name: "阀门开度",
            data: [810, 582, 991, 1024, 990],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(226, 76, 255, 0.10)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(226, 76, 255, 1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                borderRadius: [2, 2, 0, 0],
              },
            },
          },
          {
            type: "bar",
            seriesLayoutBy: "row",
            barWidth: 5,
            barMinHeight: 10,
            name: "供热量",
            data: [750, 962, 911, 854, 590],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(136, 76, 255, 0.10)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(136, 76, 255, 1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                borderRadius: [2, 2, 0, 0],
              },
            },
          },
        ],
      },
      option3: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["供水", "回水", "温度", "热耗"],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "0时",
            "1时",
            "2时",
            "3时",
            "4时",
            "5时",
            "6时",
            "7时",
            "8时",
            "9时",
            "10时",
            "11时",
            "12时",
            "13时",
            "14时",
            "15时",
            "16时",
            "17时",
            "18时",
            "19时",
            "20时",
            "21时",
            "22时",
            "23时",
          ],
          axisLabel: {
            interval: 2,
            textStyle: {
              //图例文字的样式
              color: "#fff",
            },
          },
        },
        yAxis: {
          // type: "value",
          axisLabel: {
            textStyle: {
              //图例文字的样式
              color: "#fff",
            },
            interval: 0,
          },
        },

        series: [
          {
            name: "供水",
            type: "line",
            // stack: "Total",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "回水",
            type: "line",
            // stack: "Total",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "温度",
            type: "line",
            // stack: "Total",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "热耗",
            type: "line",
            // stack: "Total",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
        ],
      },
      option4: {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "10%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周天"],
          axisLine: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [
        {
            name: "最高温度",
            color:'#91cc75',
            type: "line",
            // stack: "Total",
            data: [],
            label: {
              show: true,
              position: "bottom",
              formatter: function (num) {
                return num.value + "°C";
              },
              textStyle: {
                color: "#fff",
              },
            },
          },
          {
            name: "最低温度",
            color:'#5470c6',
            type: "line",
            // stack: "Total",
            data: [],
            label: {
              show: true,
              position: "bottom",
              formatter: function (num) {
                return num.value + "°C";
              },
              textStyle: {
                color: "#fff",
              },
            },
          },

        ],
      },
      option7: {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "40%",
          left: "-1%",
          right: "3%",
          bottom: "-30%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: false,
          data: [],
          axisLine: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          show: false,
          min: 0,
          max: 0,
        },
        series: [
          {
            name: "温度",
            type: "line",
            stack: "Total",
            data: [],
            label: {
              show: true,
              position: "top",
              formatter: function (num) {
                return num.value + "°C";
              },
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
      },
      option5: {
        backgroundColor: "transparent",
        legend: {
          top: "6%",
          textStyle: {
            //图例文字的样式
            color: "#fff",
          },
        },
        // graphic: [
        //   {
        //     type: "text",
        //     left: "center",
        //     top: "48%",
        //     style: {
        //       text: "预警信息\n\n0条",
        //       textAlign: "center",
        //       fill: "#fff",
        //       fontSize: 12,
        //     },
        //   },
        // ],
        series: [
          {
            type: "pie",
            top: "15%",
            radius: ["40%", "60%"],
            center: ["25%", "50%"],
            label: {
              show: true,
              formatter: "{b}: {c}条",
              textStyle: {
                color: "#fff",
              },
            },
            color: ["#F07049", "#FCB826"],
            data: [
              {
                value: 0,
                name: "预警数量",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          {
            type: "pie",
            top: "15%",
            radius: ["40%", "60%"],
            center: ["70%", "50%"],
            label: {
              show: true,
              formatter: "{b}: {c}条",
              textStyle: {
                color: "#fff",
              },
            },
            color: ["#F07049", "#FCB826"],
            data: [
              {
                value: 0,
                name: "今日预警",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
      },
      option6: {
        legend: {
          data: ["", ""],
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        grid: {
          width: "auto",
          height: "20%",
          containLabel: true,
        },
        radar: {
          // shape: 'circle',
          radius: 45,
          indicator: [
            { name: "通讯异常"},
            { name: "回温异常"},
            { name: "供温异常"},
            { name: "室温异常"},
            { name: "流量异常"},
            { name: "开度异常"},
          ],
          triggerEvent: true,
          name: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: {
          name: "Budget vs spending",
          type: "radar",
          data: [
            {
              value: [30, 40, 10, 50, 20, 30],
              symbol: "none",
              name: "异常信息",
              itemStyle: {
                //此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现
                color: "#40FF80",
                borderColor: "#40FF80",
              },
              areaStyle: {
                color: "#40FF80",
              },
            },
          ],
        },
      },
      dateArr: [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      dateInfo: {
        year: "2000",
        month: "01",
        date: "01",
        day: "1",
        hours: "00",
        minutes: "00",
        seconds: "00",
      },
      timer: null,
      classOption: {
        step: 0.2,
        limitMoveNum: 7,
      },
      value1: "",
      value2: "",
      value3: "",
      options1: [
        { label: "今日", value: 0 },
        { label: "昨日", value: -1 },
        { label: "前日", value: -2 },
      ],
      // 小区
      options2: [],
      // 楼栋
      options3: [],
      //数据总览选择值
      dataScreenSelect: {
        plotId: null,
        buildId: null,
        day: 0,
      },
      weatherShow: 1,
      //7日天气
      dayWeather: [],
      hoursWeater: [],
      weatherWarnText: "",
      balancedBuildVoList: [],
      buildinfo: {
        buildName: "",
        buildinfo: null,
        unitCount: null,
        heatScale: null,
      },
      time: 0,
    };
  },
  filters: {
    buL(num) {
      if (num < 10) {
        return `0${num}`;
      } else {
        return num;
      }
    },
  },
  created() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        console.log("当前地理位置", position);
        // this.$nextTick(()=>{
        //   this.getWeatherData()
        // })
      },
      (err) => {
        console.log("获取地理位置失败", err);
      }
    );
    this.initData();
    // this.$nextTick(()=>{
    //     this.getWeatherData()
    //   })
    this.timeInfo();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  watch: {
    sidebarOpened: {
      handler(newVal, oldVal) {
        setTimeout(() => {
          for (const key in myChartObj) {
            if (myChartObj[key]) {
              myChartObj[key].resize();
            }
          }
        }, 500);
      },
    },
  },
  computed: {
    todayWeather() {
      if (this.dayWeather.length > 0) {
        return this.dayWeather[0];
      } else {
        return {};
      }
    },
    sidebarOpened() {
      return this.$store.state.app.sidebar.opened;
    },
  },
  methods: {
    async initData() {
      let res = await listCPlotSelect({});
      this.options2 = res.rows;
      if (res.rows.length > 0) {
        this.plotId = this.options2[0].value;
        this.cityCode = this.options2[0].cityCode;
        this.plotName = this.options2[0].label;
        console.log("cityCode", this.options2[0]);
        this.getWeatherData();
        this.dataScreenSelect.plotId = this.plotId;
        this.getBigscreenData();
        this.getBuildList(this.plotId);
      }
    },
    //获取大屏数据
    getBigscreenData() {
      let objData = { plotId: this.plotId };
      //数据总览
      dataOverview(objData).then((res) => {
        console.log("数据总览", res);
        this.topData.totalHeatArea = res.data.totalHeatArea;
        this.topData.totalHousehold = res.data.totalHousehold;
        this.topData.warningCount = res.data.warningCount;
      });
      //设备在线
      deviceStatistics(objData).then((res) => {
        let data0 = res.data.map((item) => {
          return {
            name: item.equipmentName,
            equipmentCount: item.equipmentCount,
            value: item.equipmentCount,
            dicValue:item.dicValue,
            // online: item.online.toFixed(2),
          };
        });
        let data1 = res.data.map((item) => {
          return {
            name: item.equipmentName,
            dicValue:item.dicValue,
            equipmentCount: item.equipmentCount,
            value: item.online.toFixed(2),
            online: item.online.toFixed(2),
          };
        });
        console.log("在线设备data0", data0);
        this.option1.series[0].data = data0;
        this.option1.series[1].data = data1;
        console.log("饼状图data1", data1);
        this.$nextTick(() => {
          this.echartsFn(".biao1", this.option1);
        });
      });
      // 楼栋模型数据
      getBuildList(objData).then((res) => {
        // this.topData.totalHeatArea = res.data.heatArea
        // this.topData.totalHousehold = res.data.totalHousehold
        // this.topData.warningCount = res.data.warnNum
        if (Array.isArray(res.data.balancedBuildVoList)) {
          this.balancedBuildVoList = res.data.balancedBuildVoList;
          console.log("楼栋模型数据", this.balancedBuildVoList);
        } else {
          this.balancedBuildVoList = [];
        }
      });
      // this.getBuildList(this.plotId)
      // 预警信息
      warningInformation(objData).then((res) => {
        // this.option5.graphic[0].style.text = `预警信息\n\n${res.data.warningCount}条`;
        let data0 = [
          { value: res.data.warningCount, name: "预警数量" },
        ];
        let data1 = [
          { value: res.data.todayCount, name: "今日预警" },
        ];
        this.option5.series[0].data = data0;
        this.option5.series[1].data = data1;
        this.$nextTick(() => {
          this.echartsFn(".biao5", this.option5);
        });
      });
      // 中间底部数据
      indexStatistics(objData).then((res) => {
        for (const key in this.footData) {
          this.footData[key] = res.data[key];
        }
      });
      // 预警分类
      warnType(objData).then((res) => {
        let { data } = res;
        // let indicator = []
        let max = Math.max(...data)
        // let value = [0, 0, 0, 0, 0, 0]
        // for (let i = 0; i < res.data.length; i++) {
        //   if (res.data[i].value) {
        //     value[i] = res.data[i].value
        //   }
        //   // indicator.push({ name: res.data[i].name })
        // }
        // // this.option6.radar.indicator = indicator
        this.option6.radar.indicator=[
            { name: "通讯异常",max },
            { name: "回温异常",max },
            { name: "供温异常",max },
            { name: "室温异常",max },
            { name: "流量异常",max },
            { name: "开度异常",max },
        ]
        this.option6.series.data[0].value = data;
        this.$nextTick(() => {
          this.echartsFn(".biao6", this.option6);
        });
      });
      // 节能数据对比
      energyData(objData).then((res) => {
        this.option2.series[0].data = res.data.heatOrColdList
          ? res.data.heatOrColdList
          : [];
        this.option2.series[1].data = res.data.valveOpenList
          ? res.data.valveOpenList
          : [];
        this.option2.series[2].data = res.data.thermalPowerList
          ? res.data.thermalPowerList
          : [];
        this.option2.xAxis.data = res.data.buildList;
        this.$nextTick(() => {
          this.echartsFn(".biao2", this.option2);
        });
      });
    },
    //获取天气数据
    getWeatherData() {
      // let p = { lat: '30.606351', lon: '104.10207' }
      let { cityCode } = this.options2.find(
        (item) => item.value === this.plotId
      );
      console.log("获取天气对象", cityCode);
      let p = { cityCode };
      getRealTime(p).then((res) => {
        let data = JSON.parse(res.msg).data.hourly.slice(1, 8);
        this.hoursWeater = data.map((item) => {
          item.hour = item.hour + ":00";
          return item;
        });
        this.option7.xAxis.data = data.map((item) => item.hour);
        this.option7.series[0].data = data.map((item) => item.temp);
        this.$nextTick(() => {
          this.echartsFn(".weatherBiao2", this.option7);
        });
      });
      getWeather(p).then((res) => {
        let data = JSON.parse(res.msg).data.forecast.slice(1, 8);
        this.option4.series[1].data = data.map((item) => item.tempNight);
        this.option4.series[0].data = data.map((item) => item.tempDay);
        console.log('最低',this.option4.series[1].data);
        console.log('最高',this.option4.series[0].data);
        this.option7.yAxis.min = data[0].tempNight;
        this.option7.yAxis.max = data[0].tempDay;
        this.dayWeather = data.map((item) => {
          item.week = moment(item.predictDate).format("dddd");
          return item;
        });
        console.log("天气预报", this.dayWeather);
        this.$nextTick(() => {
          this.echartsFn(".biao4_info", this.option4);
          this.echartsFn(".weatherBiao2", this.option7);
        });
      });
      weatherWarning(p).then((res) => {
        let data = JSON.parse(res.msg).data;
        if (data.alert && data.alert.length > 0) {
          this.weatherWarnText = data.alert[0].type;
        } else {
          this.weatherWarnText = "暂无预警";
        }
      });
    },
    // 获取折线图数据
    getflodData() {
      lineChart(this.dataScreenSelect).then((res) => {
        let arr1 = Array.isArray(res.data.waterSupplyTemperatures)
          ? res.data.waterSupplyTemperatures
          : [];
        let arr2 = Array.isArray(res.data.returnWaterTemperatures)
          ? res.data.returnWaterTemperatures
          : [];
        let arr3 = Array.isArray(res.data.temperatures)
          ? res.data.temperatures
          : [];
        let arr4 = Array.isArray(res.data.thermalPowers)
          ? res.data.thermalPowers
          : [];
        let xaxis = Array.isArray(res.data.xaxis) ? res.data.xaxis : [];
        let narr1 = Array.from({ length: 24 }, () => null);
        let narr2 = Array.from({ length: 24 }, () => null);
        let narr3 = Array.from({ length: 24 }, () => null);
        let narr4 = Array.from({ length: 24 }, () => null);
        console.log("时间数组", xaxis, narr1);
        xaxis.forEach((item, index) => {
          console.log(item);
          let time = item.split(" ")[1];
          if (time[0] === "0") {
            time = time[1];
          }

          narr1[time] = arr1[index];
          narr2[time] = arr2[index];
          narr3[time] = arr3[index];
          narr4[time] = arr4[index];
        });
        console.log("数组", narr1);
        this.option3.series[0].data = narr1;
        this.option3.series[1].data = narr2;
        this.option3.series[2].data = narr3;
        this.option3.series[3].data = narr4;
        this.$nextTick(() => {
          this.echartsFn(".biao3_info", this.option3);
        });
      });
    },
    //选择小区
    plotChange(e) {
      console.log("切换小区时拿到的值", e);
      this.getBigscreenData();
      //切换小区时，拿到小区名
      console.log(this.options2);
      let options2 = this.options2
      let [plot] = options2.filter(item=>{
        return item.value == e
      })
      console.log("过滤的小区",plot);
      this.plotName = plot.label
      this.getBuildList(this.plotId);
      this.dataScreenSelect.plotId = this.plotId;
      this.getWeatherData();
    },
    //数据总览选择小区
    bottomPlotChange(e) {
      this.dataScreenSelect.buildId = null;
      let id = e.target.value;
      this.getBuildList(id);
    },
    bottomBuildChange(e) {
      this.dataScreenSelect.buildId = e.target.value;
      this.getflodData();
    },
    bottomDayChange(e) {
      this.dataScreenSelect.day = e.target.value;
      this.getflodData();
    },
    //获取楼栋列表
    getBuildList(plotId) {
      console.log("切换小区时，楼栋下拉列表id", plotId);
      listBuildSelect({ plotId }).then((res) => {
        this.options3 = res.rows;
        if (res.rows.length > 0) {
          this.dataScreenSelect.buildId = res.rows[0].value;
          this.getflodData();
        }
      });
    },
    // 绘制图表
    echartsFn(dom, option) {
      const chartDom = document.querySelector(dom);
      const myChart = echarts.init(chartDom, null, { renderer: "svg" });
      let key = dom.replace(".", "");
      myChartObj[key] = myChart;
      myChart.setOption(option);
      if (dom === ".biao1" || dom === ".biao5" || dom === ".biao6") {
        myChart.off("click");
        myChart.on("click", (params) => {
          if (dom === ".biao1") {
            console.log("点击在线台数的参数",params);
            let {name,data} = params
            let plotId = this.plotId
            this.$router.push({
              // path: "/equipment/equipmentMessage",
              name:"EquipmentMessage",
              params: {
                name,
                data,
                plotId,
              },
            });
          } else if (dom === ".biao5") {
            console.log("点击预警信息时的参数",params);
            let {name} = params
            let plotId = this.plotId
            
            this.$router.push({
              // path: "/warning/warning",
              name:"Warning",
              params: {
                name,
                plotId,
              },
            });
          } else {
            
            console.log("点击预警时的参数", params);
            let {name} = params
            let plotId = this.plotId
            if(name=="异常信息"){
              return
            }
            this.$router.push({
              // path: "/warning/warning",
              name:"Warning",
              params: {
                name,
                plotId,
              },
            });
          }
        });
      }
      if (dom === ".biao2") {
        myChart.on("legendselectchanged", (params) => {
          console.log("图例切换事件", params);
          let { 供热量, 能耗, 阀门开度 } = params.selected;
          if (阀门开度 && !供热量 && !能耗) {
            // this.option2.yAxis.max = 100
            this.$set(this.option2.yAxis, "max", 100);
            console.log("设置max为100后", this.option2);
            this.$nextTick(() => {
              myChart.setOption(this.option2);
            });
          } else {
            this.$set(this.option2.yAxis, "max", null);
            console.log("设置max为0后", this.option2);
            this.$nextTick(() => {
              myChart.setOption(this.option2);
            });
          }
        });
      }
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    fullScreen() {
      if (!this.fullBoolean) {
        //如果未全屏，则开启全屏
        this.fullBoolean = true;
        //获取需要全屏的元素
        let full = document.getElementById("fullDom");
        //开启全屏方法
        this.toFullscreen(full);
        //分辨率调整后，重新初始化方法
        // this.init();
      } else {
        //如果已全屏，则退出全屏
        this.fullBoolean = false;
        //退出全屏方法
        this.cancelFullscreen();
        //分辨率调整后，重新初始化方法
        // this.init();
      }
      this.fullBoolean = false;
    },
    //全屏方法
    toFullscreen(element) {
      //全屏
      if (element.requestFullscreen) {
        element.requestFullscreen();
      }
      //兼容Firefox全屏
      else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      }
      //兼容Chrome Safari Opera全屏
      else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
      //兼容IE Edge全屏
      else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },
    //退出全屏
    cancelFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
    timeInfo() {
      this.timer = setInterval(() => {
        let date = new Date();
        this.dateInfo.year = date.getFullYear();
        this.dateInfo.month = date.getMonth() + 1;
        this.dateInfo.date = date.getDate();
        this.dateInfo.day = date.getDay();
        this.dateInfo.hours = date.getHours();
        this.dateInfo.minutes = date.getMinutes();
        this.dateInfo.seconds = date.getSeconds();
      }, 1000);
    },
    weatherShowChange(type) {
      this.weatherShow = type;
    },
    buildMousemove({ mesh }) {
      console.log("显示");
      this.time = new Date().getTime();
      let userData = mesh.userData;
      this.buildinfo = userData;
      this.flag = true;
    },
    buildMouseout() {
      let time = new Date().getTime();
      this.time = time;
      setTimeout(() => {
        if (this.time === time) {
          this.flag = false;
          console.log("关闭");
        } else {
          this.flag = true;
          console.log("显示");
        }
      }, 1000);
    },
    goUnit({ mesh }) {
      let buildId = mesh.userData.buildId;
      this.$router.push({
        path: `/balancedView/unit`,
        query: {
          plotId: this.plotId,
          buildId: buildId,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  // padding: 0;
  margin: 0;
}

.head-select {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-left: 20px;
}

.fullTitle {
  cursor: pointer;
  color: rgb(19, 66, 254);
  font-size: 14px;
  // margin: 20px 0;
  padding: 20px;
  // width: 100%;
  text-align: right;
  // padding-right: 20px;
  box-sizing: border-box;
}

#fullDom {
  background-color: #000;
  height: 100vh;
  width: 100%;
  min-width: 1200px;

  .info_box {
    width: 277px;
    position: absolute;
    background: linear-gradient(180deg, #000a27 0%, #003aff 100%);
    top: 40%;
    left: 55%;
    z-index: 999;
    transform: translate(-50%, -50%);
    box-shadow: inset 0px -1px 3px 0px rgba(75, 184, 255, 0.5);
    opacity: 0.7;
    border: 1px solid;
    border-image: linear-gradient(
        315deg,
        rgba(255, 255, 255, 1),
        rgba(0, 209, 255, 1)
      )
      1 1;

    .info_word {
      font-size: 25px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 30px;
      padding: 10px;
      box-sizing: border-box;
    }
  }

  // background-color: aqua;
  .title {
    width: 100%;
    height: 90px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 1.4rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    .date {
      position: absolute;
      z-index: 999;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
    }

    .info {
      position: absolute;
      z-index: 999;
      top: 50%;
      transform: translateY(-50%);
      right: 20px;
    }

    .img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .tag {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 390px;
      height: 27px;
      z-index: 999;
    }
    .tagText {
      display: inline-block;
      position: absolute;
      text-align: center;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 450px;
      // height: 27px;
      font-size: 30px;
      z-index: 999;

      background-image: linear-gradient(#dce0fc 60%, #458efe 100%);
      background-clip: text;
      -webkit-background-clip: text;
      // -webkit-text-stroke: 1px #ddd;
      -webkit-text-fill-color: transparent; /*需要文字透明*/
    }
  }

  .content {
    height: calc(100% - 90px);
    width: 100%;
    margin-top: 5px;
    display: flex;
    padding: 0 5px;
    box-sizing: border-box;

    .left {
      width: 25%;
      flex: 1;
      pointer-events: auto;

      // background-color: red;
      .titleInfo {
        height: 5%;
        width: 100%;
        background: url("../../assets/images/img (5).png") no-repeat;
        background-size: cover;
        padding-left: 31px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 0.75rem;
      }

      .biao1 {
        margin-top: 1%;
        margin-bottom: 1%;
        height: 21%;
        width: 100%;
        background: url("../../assets/images/img (4).png") no-repeat;
        background-size: cover;
      }

      .biao2 {
        margin-top: 1%;
        margin-bottom: 1%;
        height: 28%;
        width: 100%;
        background: url("../../assets/images/img (4).png") no-repeat;
        background-size: cover;
      }

      .biao3 {
        margin-top: 1%;
        margin-bottom: 1%;
        height: 33%;
        width: 100%;
        background: url("../../assets/images/img (4).png") no-repeat;
        background-size: cover;
      }
    }

    .center {
      flex: 2;
      width: 50%;
      // background-color: greenyellow;
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-between;
      padding: 5px 5px 0;
      box-sizing: border-box;
      min-width: 250px;

      .bottom {
        width: 100%;
        height: 16%;
        // background-color: aquamarine;
        display: flex;
        justify-content: space-between;

        .box {
          width: 32%;
          height: 100%;
          // background-color: red;
          background: url("../../assets/images/img (4).png") no-repeat;
          background-size: cover;
          color: #fff;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;

          .bottom_top {
            font-size: 1.6rem;
            margin-bottom: 15px;
          }

          .bottom_bottom {
            font-size: 1.8rem;
          }
        }
      }

      .top {
        width: 100%;
        height: 36%;
        // background-color: pink;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .box {
          width: 32%;
          height: 48%;
          // background-color: red;
          background: url("../../assets/images/img (4).png") no-repeat;
          background-size: cover;
          color: #fff;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;

          .bottom_top {
            font-size: 1.8rem;
            height: 38px;
            line-height: 38px;
            margin-bottom: 15px;
          }

          .bottom_center {
            font-size: 1.6rem;
            margin-bottom: 15px;
          }

          .bottom_bottom {
            font-size: 1.6rem;
          }
        }
      }
    }

    .right {
      width: 25%;
      flex: 1;
      pointer-events: auto;
      overflow-x: hidden;

      // background-color: pink;
      .titleInfo {
        height: 5%;
        width: 100%;
        background: url("../../assets/images/img (5).png") no-repeat;
        background-size: cover;
        padding-left: 31px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 12px;
      }

      .biao4 {
        margin-top: 1%;
        margin-bottom: 1%;
        height: 30%;
        width: 100%;
        background: url("../../assets/images/img (4).png") no-repeat;
        background-size: cover;

        .gundong {
          height: 80px;
          overflow: hidden;
          transform: translateY(-10px);

          .scrollInfo {
            margin: 0 0 10px 0;
            color: #fff;
            // display: flex;
            // justify-content: space-around;
            display: grid;
            grid-template-columns: 1fr 2fr 1fr 1fr;
            // grid-column: 116px;
            font-size: 12px;
            line-height: 16px;
            .w-center {
              // width: 20%;
              // width: 50px;
              // display: grid;
              // grid-template-columns: 1fr 1fr;
              // display: flex;
              // align-items: center;
              // justify-content: center;
              // text-align: center;
              img {
                vertical-align: middle;
              }
            }

            span {
              text-align: center;
            }
          }
        }
      }

      .biao5 {
        margin-top: 1%;
        margin-bottom: 1%;
        height: 25%;
        width: 100%;
        background: url("../../assets/images/img (4).png") no-repeat;
        background-size: cover;
      }

      .biao6 {
        margin-top: 1%;
        margin-bottom: 1%;
        height: 26%;
        width: 100%;
        background: url("../../assets/images/img (4).png") no-repeat;
        background-size: cover;
        padding: 10px;
        box-sizing: border-box;
      }
    }
  }
}

.w-warp {
  padding-top: 5px;
  box-sizing: border-box;

  .w-top {
    color: #fff;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

.weatherScroll {
  width: 200%;
  height: 80%;
  display: flex;
  flex-wrap: nowrap;
  transition: all 0.3s;
  transform: translateX(0px);

  .boxItem {
    width: 50%;
  }
}

.weather2BoxShow {
  transform: translateX(-50%);
}

.weatherBox {
  width: 50%;
  height: 100%;
  padding-top: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .weatherList {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .weatherItem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .time {
        color: #fff;
        font-size: 13px;
      }

      .weatherImage {
        width: 18px;
        height: 18px;
        margin-top: 10px;
      }

      .weatherText {
        color: #fff;
        font-size: 12px;
        margin-top: 8px;
      }
    }
  }

  .weatherBiao2Box {
    height: 50%;
    margin-top: 5%;
    padding: 0 10px;
  }

  .weatherBiao2 {
    width: 100%;
    height: 100%;
  }
}

.t-change {
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  .change-item {
    width: 40px;
    height: 8px;
    background: #dddddd;
    border-radius: 4px;
    cursor: pointer;

    &:nth-child(1) {
      margin-right: 16px;
    }
  }

  .active-t-item {
    background: #fff;
  }
}

.scrollable {
  animation: scroll 10s infinite linear;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

::v-deep .el-popper .el-select-dropdown__item {
  padding: 0 20px;
}

.pointerEvents {
  pointer-events: none;
}

//天气轮播用icon
.tianqiicon {
  display: inline-block;
  height: 100%;
  // width: 19px;
  background-image: url("../../assets/images/tianqi (1).png");
  background-size: 16px;
  background-repeat: no-repeat;
}
</style>
